<template>
	<view class="bus-main">
		<!-- 商学院————搜索 -->
		<view class="wrap" style="padding-bottom:0rpx;">
			<!-- 顶部导航栏 -->
			<view class="topbox mar-top-30">
				<!-- 搜索框 -->
				<view class="input-box">
					<input class="s-txt" type="text" v-model="searchText" placeholder="请输入关键字进行搜索" />
					<view class="icon search" @click="Tosearch">
						<image src="https://web.suqzp.com/public/search.png"></image>
					</view>
				</view>
			</view>
			<view class="navbar">
				<view v-for="(item, index) in navList" :key="index" class="nav-item"
					:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
					{{ item.text }}
				</view>
			</view>
		</view>
		<!-- 显示区域 -->
		<view class="list" v-for="(item, index) in navList" :key="index" v-if="tabCurrentIndex === index">
			<view class="bg-ff mar-bot-16 list-wap" v-for="item in modelData" :key="item.id" @click="goToDesc(item)">
				<view class="list-item">
					<view class="two-ellipsis fs-28 fc-33 lin-h-20 pad-top-10">{{ item.title }}
					</view>
					<view class="flex l-1">
						<view class="im1s">
							<image :src="item.avatar"></image>
						</view>
						<view class="flex-1">{{ item.nickname }}</view>
					</view>
					<view class="contents fc-66 fs-26" v-html="item.content">
					</view>
					<view class="report-img flex mar-top-20">
						<view class="img-style" v-for="(element,index) in item.imgList" :key="index">
							<image :src="element"></image>
						</view>
					</view>
					<view class="flex jcsb">
						<view class="fs-26 fc-99">
							<view class="lok-icon">
								<image src="https://web.suqzp.com/public/look.png"></image>
							</view>
							{{ item.readCount ? item.readCount : 0 }}
						</view>
						<view class="fs-26 fc-99">
							<view class="lok-icon">
								<image src="https://web.suqzp.com/public/zf.png"></image>
							</view>
							{{ item.shareCount ? item.shareCount : 0 }}
						</view>
						<view class="fs-26 fc-99">
							<view class="lok-icon">
								<image src="https://web.suqzp.com/public/zan.png"></image>
							</view>
							{{ item.likeCount ? item.likeCount : 0 }}
						</view>
						<view class="fs-26 fc-99">
							<view class="lok-icon">
								<image src="https://web.suqzp.com/public/info.png"></image>
							</view>
							{{ item.commentCount ? item.commentCount : 0 }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="release-but" @click="Torelease">
			<image src="https://web.suqzp.com/public/add.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				navList: [{
						state: 0,
						text: '综合',
						orderList: []
					},
					{
						state: 1,
						text: '推荐',
						orderList: []
					},
					{
						state: 2,
						text: '最新',
						orderList: []
					},
					{
						state: 3,
						text: '最多浏览',
						orderList: []
					},
					{
						state: 4,
						text: '最多评论',
						orderList: []
					}
				],
				searchForm: {},
				searchText: '',
				modelData: '',
				tabCurrentIndex: 0,
			}
		},
		onLoad(options) {
			// 页面显示是默认选中第一个
			this.tabCurrentIndex = 0;
			this.getPostsList()
		},
		methods: {
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			},
			// 获取帖子list
			getPostsList() {
				this.$apis.getCollegePostsList(this.searchForm).then(res => {
					console.log('res', res)
					res.rows.forEach(item => {
						item.imgList = item.imgUrl.split(',')
					})
					// 数据处理 解析帖子类型
					this.modelData = res.rows
					console.log('this.modelData ', this.modelData)
				})
			},
			// 跳转到查看详情页面
			goToDesc(item) {
				// 携带Id跳转到查看详情页面
				uni.navigateTo({
					url: `/pages/user/person/busines/posts-show?id=${item.id}`
				})
			},
			// 帖子搜索
			Tosearch() {
				// 接口需要改成商学院帖子查询
				this.searchForm.title = this.searchText
				this.getPostsList()
			},
			//顶部tab点击
			tabClick(index) {
				console.log(index)
				this.tabCurrentIndex = index;
				this.searchForm = this.$options.data().searchForm;
				// 根据选中查询条件 查询
				if (index == 0) {
					// 综合查询
					this.getPostsList()
				} else if (index == 1) {
					// 推荐查询
					this.searchForm.isRecommend = 1
					this.getPostsList()
				} else if (index == 2) {
					// 最新排序
					this.searchForm.orderField = 'create_time'
					this.searchForm.orderType = 'desc'
					this.getPostsList()
				} else if (index == 3) {
					// 最多浏览排序
					this.searchForm.orderField = 'read_count'
					this.searchForm.orderType = 'desc'
					this.getPostsList()
				} else if (index == 4) {
					// 最多评论排序
					this.searchForm.orderField = 'comment_count'
					this.searchForm.orderType = 'desc'
					this.getPostsList()
				}
			},
			//发布
			Torelease() {
				// 判断当前用户是否认证通过商学院
				// 拿当前用户Id查询 商学院表 取第一条记录 拿审核字段判断 通过者跳转其他则提示认证
				let params = {
					wxUserId: this.userInfo.id
				}
				this.$apis.getCollegeList(params).then(res => {
					if (res && res.rows[0] && res.rows[0].auditStatus == 1) {
						uni.navigateTo({
							url: './release'
						})
					} else {
						uni.showToast({
							title: '发帖请认证商学院',
							icon: 'none'
						})
					}
				})

			}
		}
	};
</script>
<style lang="scss">
	page {
		position: relative;
		background-color: #fff;
	}

	.bus-main {
		position: relative;
	}

	.topbox {
		.input-box {
			width: 100%;
			height: 80rpx;
			background-color: #f5f5f5;
			position: relative;
			display: flex;
			align-items: center;
			flex: 1;
			border-radius: 100rpx;

			.s-txt {
				font-size: 28rpx;
				color: #999;
				width: 100%;
			}

			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				top: 28rpx;
				left: 32rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					display: inline-block;
					display: flex;
					align-items: center;
				}
			}

			input {
				padding-left: 72rpx;
				height: 28rpx;
				font-size: 28rpx;
			}
		}
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30rpx;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: #323232;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 48rpx;
					height: 0;
					border-bottom: 2px solid #89C3F5;
				}
			}
		}
	}

	.list {
		background: #f8f8f8;
		padding-bottom: 100rpx;

		.list-wap {
			padding: 20rpx 0;
		}

		.list-item {
			padding: 0 4%;
		}

		.mar-bot-16 {
			margin-bottom: 16rpx;
		}

		.lin-h-20 {
			line-height: 42rpx;
		}

		.l-1 {
			margin: 18rpx 0;

			.im1s {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				display: block;
				margin-right: 20rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
				}
			}
		}

		.report-img {
			.img-style {
				margin: 0 0 24rpx 12rpx;
				width: 220rpx;
				height: 210rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				overflow: hidden;

				image {
					width: 100%;
				}
			}

			.img-style:nth-child(3n+1) {
				margin: 0 0rpx 24rpx 0;
			}
		}

		.lok-icon {
			width: 44rpx;
			height: 44rpx;
			display: inline-block;
			margin-right: 6rpx;
			position: relative;
			top: 10rpx;

			image {
				width: 44rpx;
				height: 44rpx;
				display: block;
			}
		}
	}

	.release-but {
		width: 156rpx;
		height: 156rpx;
		display: block;
		position: fixed;
		bottom: 20%;
		right: 0;

		image {
			width: 156rpx;
			height: 156rpx;
			display: block;
		}
	}
</style>
